<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>树组件</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../assets/layui/layui-v2.5.4/css/layui.css"  media="all">
</head>
<body>

<div id="test1"></div>
<div id="shu" class="demo-tree demo-tree-box" style="width: 200px; height: 300px; overflow: scroll; margin: auto;margin-top: 10%;  border: solid 1px silver;"></div>
<div class="layui-btn-container">
    <button type="button" style="margin-top: 5%;margin-left: 50%;" class="layui-btn layui-btn-sm" lay-demo="getChecked">确定</button>
    <button type="button" id="qx" style="margin-top: 5%;"  class="layui-btn layui-btn-sm" >取消</button>
    <!--  <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
      <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>-->
</div>
<script src="../assets/js/jquery-3.4.1.min.js"></script>
<script src="../assets/layui/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script type="text/javascript">
   // var tree;
    layui.use(['tree','layer','util', 'layedit','jquery'], function(){
        var tree = layui.table
            ,layer = layui.layer
            ,util = layui.util
            ,layedit = layui.layedit
            ,$ = layui.jquery;
        $.ajax({
            type:"get",
            url:"/permission/getPermissionByAccount",
            dataType: 'json',
            success:function (result) {
               // alert(JSON.stringify(result));
                var node = "[";
                $.each(result.flist,function (i,v) {
                    node += "{";
                    node += '"title":"' + v.description + '",';
                    node += '"id":"' + v.permissionId +'",';
                    node += '"children":[';
                    $.each(result.zlist,function (i,b) {
                        if(b.parentId==v.permissionId){
                            node += "{";
                            node += '"title":"' + b.description + '",';
                            node += '"id":"' + b.permissionId +'"';
                            node += "},";
                        }
                    });
                    node = node.substring(0, node.length-1); //二级树展开时放开
                    node += ']},';
                });
                node = node.substring(0, node.length-1);
                node += "]";
                //alert(node);
                var list = JSON.parse(node);
                tree = layui.tree;
                //渲染
                var inst1 = tree.render({
                    elem: '#shu'  //绑定元素
                    ,data:list
                    ,showCheckbox: true
                    ,id:'shu'

                });
            }
        });


        util.event('lay-demo', {
            getChecked: function(othis){
                var checkedData = tree.getChecked('shu'); //获取选中节点的数据
                layer.alert(JSON.stringify(checkedData), {shade:0});
                var permissionId="";
                $.each(checkedData,function (i,v) {
                    permissionId+=v.id+",";
                    $.each(v.children,function (i,b) {
                        permissionId+=b.id+",";
                    });
                });
                window.parent.document.getElementById("permissionId").value = permissionId;
             //  document.getElementById("role").value = "hello world!";
              //  $(window.parent.document).getElementById("role").value="hello world!";
           // $(window.parent.document).getElementById("#role").val("123");
                //alert($(window.parent.document).find("#role").val());
                var indexFrame = parent.layer.getFrameIndex(window.name);
                parent.layer.close(indexFrame); //执行关闭自身操作
                // console.log(checkedData);
            }
        });

        $("#qx").on("click", function(){
            var indexFrame = parent.layer.getFrameIndex(window.name);
            parent.layer.close(indexFrame); //执行关闭自身操作
        })

    });





 /*   layui.use('tree', function(){
        $.ajax({
            type:"get",
            url:"/permission/getPermissionByAccount",
            dataType: 'json',
            success:function (result) {
                // alert(JSON.stringify(result));
                var node = "[";
                $.each(result.rlist,function (i,v) {
                    node += "{";
                    node += '"title":"' + v.description + '",';
                    node += '"children":[';
                    $.each(result.ulist,function (i,b) {
                        if(v.roleId==b.role_id){
                            node += "{";
                            node += '"title":"' + b.username + '",';
                            node += '"id":"' + b.user_id +'"';
                            node += "},";
                        }
                    });
                    node = node.substring(0, node.length-1); //二级树展开时放开
                    node += ']},';
                });
                node = node.substring(0, node.length-1);
                node += "]";
                var list = JSON.parse(node);
                var tree = layui.tree;
                //渲染
                var inst1 = tree.render({
                    elem: '#test9'  //绑定元素
                    ,data:list
                    ,showCheckbox: true
                });
            }
        });
    });*/

</script>
</body>

</html>